<script>
import request from "@/utils/request";
import $ from "jquery";
import * as utils from "@/views/bi/portal/Utils";
import { Loading } from "element-ui";

export default {
  components: {},
  data() {
    return {
      data: null,
      islink: false, //是否做了事件联动
    };
  },
  props: {
    comp: {
      type: Object,
      required: true,
      default: {},
    },
    editor: {
      type: Boolean,
      required: true,
      default: true,
    },
    portalParams: {
      type: Array,
      required: false,
    },
  },
  render(h) {
    let ts = this;
    let comp = this.comp;
    if (this.data) {
      let trs = [];
      $(this.data.header).each((a, b) => {
        let ths = [];
        $(b).each((c, d) => {
          ths.push(
            h(
              "th",
              {
                class: "grid3-td",
                attrs: {
                  colspan: d.colSpan,
                  rowspan: d.rowSpan,
                  align: "center",
                },
              },
              [h("div", { class: "dg-cell" }, d.desc)]
            )
          );
        });
        trs.push(h("tr", ths));
      });

      let table1 = h("table", { class: "lockgrid" }, [h("thead", trs)]);

      let tbodytrs = [];
      $(this.data.datas).each((a, b) => {
        let tds = [];
        let curRowValue = null;
        $(b).each((c, d) => {
          tds.push(
            h(
              "td",
              {
                attrs: {
                  class: "lockgrid-td",
                  colspan: d.colSpan,
                  rowspan: d.rowSpan,
                  align: d.isRow == true ? "left" : "right",
                },
              },
              [h("div", { class: "dg-cell" }, d.value)]
            )
          );
          if (d.isRow === true) {
            curRowValue = d.value;
          }
        });
        if (this.editor == false && comp.link && comp.link.target.length > 0) {
          //在浏览模式下有联动事件
          tbodytrs.push(
            h(
              "tr",
              {
                style: { cursor: "pointer" },
                on: {
                  click: () => {
                    ts.tableEvent(curRowValue);
                  },
                },
              },
              tds
            )
          );
        } else {
          tbodytrs.push(h("tr", tds));
        }
      });
      let table2 = h("table", { class: "lockgrid" }, [h("thead", tbodytrs)]);

      let bodysyl = { overflow: "auto" };
      if (comp.height) {
        let height = comp.height;
        height = height - this.data.colLevel * 28; //组件高度减去 head 的高度
        bodysyl.height = height + "px";
      } else {
        bodysyl.height = "220px";
      }
      let cld = [
        h("div", { class: "lock-dg-header" }, [table1]),
        h("div", { class: "lock-dg-body", style: bodysyl }, [table2]),
      ];
      let ret = h("div", { class: "lock-dg", attrs: { id: comp.id } }, cld);
      if (ts.islink == true) {
        //添加返回按钮
        return h("div", [
          h("span", { class: "eventback" }, [
            h("span", {
              class: "label label-success",
              on: {
                click: () => {
                  this.linkBack();
                },
              },
              domProps: { innerHTML: '<i class="fa fa-arrow-left"></i>返回' },
            }),
          ]),
          ret,
        ]);
      } else {
        return h("div", [ret]);
      }
    } else {
      if (this.editor === true) {
        return h("div", {
          attrs: { align: "center", class: "tipinfo" },
          domProps: {
            innerHTML:
              '(点击<i class="fa fa-wrench"></i>按钮配置' +
              utils.getCompTypeDesc(comp.type) +
              ")",
          },
        });
      } else {
        return h("div", "数据加载中...");
      }
    }
  },
  mounted() {
    if (this.editor === true) {
      this.tableView();
    }
  },
  computed: {},
  methods: {
    bindScrollEvent() {
      let comp = this.comp;
      //注册table的scroll事件
      $("#" + comp.id + " .lock-dg-body")
        .unbind("scroll")
        .bind("scroll", function () {
          var left = $(this).scrollLeft();
          $("#" + comp.id + " .lock-dg-header").css(
            "margin-left",
            "-" + left + "px"
          );
        });
    },
    tableEvent(val) {
      let comp = this.comp;
      this.islink = true;
      utils.compFireEvent(comp.link, this, comp.link.paramName, val);
    },
    linkBack() {
      this.islink = false;
      utils.compBackEvent(this.comp.link, this);
    },
    tableView() {
      let ts = this;
      let comp = this.comp;
      if (comp.kpiJson && comp.kpiJson.length > 0) {
        let json = JSON.parse(JSON.stringify(comp));
        json.portalParams = ts.portalParams;
        let loadingInstance = Loading.service({
          fullscreen: false,
          target: document.querySelector("#c_" + comp.id + " div.ccctx"),
        });
        request({
          headers: { "Content-Type": "application/json" },
          url: "/bi/portal/tableView",
          method: "POST",
          data: json,
        })
          .then((resp) => {
            ts.data = resp.rows;
            ts.$nextTick(() => ts.bindScrollEvent());
            loadingInstance.close();
          })
          .catch((e) => {
            loadingInstance.close();
          });
      }
    },
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.eventback {
  position: absolute;
  width: 50px;
  right: 5px;
  cursor: pointer;
  display: block;
  z-index: 9999;
}
TABLE.grid3 {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
TABLE.grid3 TH {
  text-align: center;
  border: 1px solid #cacaca;
  font-size: 13px;
  height: 26px;
  background-color: #eeeeee;
  font-weight: normal;
  word-wrap: break-word;
}
TABLE.grid3 TD.grid3-td,
TABLE.grid3 TD.grid3-foot {
  border: 1px solid #cacaca;
  padding: 3px 2px 3px 2px;
  font-size: 12px;
  height: 20px;
  word-wrap: break-word;
}
TABLE.lockgrid th.grid3-cross-kpi {
  text-align: right;
}
TABLE.grid3 tr:hover {
  background-color: #ffffd2;
}

TABLE.grid3 TR.link-selected {
  background-color: #efefef;
}

TABLE.grid3 TR.row-link {
  cursor: pointer;
}

TABLE.grid3 TR.row-embed {
  background-color: #ffffff !important;
}
.pagesizeinfo {
  padding: 3px;
  clear: both;
}
.pagesizeinfo .pagesizeLeft {
  float: left;
}
.pagesizeinfo .pagesizeRight {
  text-align: right;
  padding: 3px;
}
TABLE.lockgrid {
  border-collapse: collapse;
  table-layout: fixed;
}
TABLE.lockgrid TH {
  text-align: center;
  padding: 2px;
  font-size: 13px;
  height: 26px;
  white-space: nowrap;
}
TABLE.lockgrid TD.pms {
  color: rgb(255, 0, 0);
  font-weight: bold;
}
TABLE.lockgrid th.crossHead0,
TABLE.lockgrid th.crossHead1,
TABLE.lockgrid th.crossHead2 {
  text-align: center;
}
TABLE.lockgrid TD.lockgrid-td,
TD.grid3-foot {
  padding: 8px 2px 8px 2px;
  font-size: 12px;
  line-height: 1.42857;
}
TABLE.lockgrid div.dg-cell {
  width: 90px;
  overflow: hidden;
}
TABLE.table-body-def TD.lockgrid-td,
TD.grid3-foot {
  border-bottom: 1px solid #dddddd;
}
TABLE.bigscreen tr:hover {
  background-color: #e4e4e4;
}
TABLE.bigscreen tr:hover td,
TABLE.bigscreen tr:hover th,
TABLE.bigscreen tr:hover td a {
  color: #181818;
}
TABLE.bigscreen td a {
  color: #e4e4e4;
}
TABLE.table-body-def tr:hover {
  background-color: #ffffd2;
}
.lock-dg {
  overflow: hidden;
}
.lock-dg div.bigscreen {
  background-color: #f5f5f6;
}
.lock-dg div.table-hd-def {
  background-color: #f5f5f6;
  overflow: hidden;
}
.lock-dg .lock-dg-body {
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}
.lock-dg .lock-dg-body:hover {
  overflow-x: auto;
}
.crossDirll-level {
  float: left;
}
.lock-dg-header {
  background-color: #f5f5f6;
}
</style>
